<template>
  <el-drawer
    :title="
      drawer.type === 'edit'
        ? '编辑模版'
        : drawer.type === 'new'
        ? '新增模版'
        : '模版详情'
    "
    :visible.sync="drawer.show"
    size="60%"
    custom-class="add-drawer"
    :before-close="handleClose"
  >
    <!-- <div style="padding: 0 20px;margin-bottom: 20px;">
            <el-divider></el-divider>
            <el-form :inline="true" :model="queryData" size="small" ref="queryData" :rules="queryDataRules">
                <el-form-item label="油企名称" v-if="authUser" prop="enterpriseId">
                    <el-select placeholder="请选择油企" v-model="queryData.enterpriseId" :disabled="drawer.type === 'read'">
                        <el-option v-for="item in enterpriseList" :key="item.enterpriseId" :label="item.enterpriseName"
                            :value="item.enterpriseId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="推送渠道" prop="pushChannel">
                    <el-select v-model="queryData.pushChannel" placeholder="请选择推送渠道" :disabled="drawer.type === 'read'">
                        <el-option v-for="item in channelList" :key="item.value" :label="item.key"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div> -->
    <div style="padding: 0 20px; margin-bottom: 30px">
      <!-- <p>消息配置</p> -->
      <el-divider></el-divider>
      <div class="title">
        模板消息仅支持已认证服务号“IT科技/互联网|电子商务->交通工具/汽车相关”类目，请登录<a
          href="https://mp.weixin.qq.com/"
          target="_blank"
          >”公众平台“</a
        >，左侧菜单栏”广告与服务“-”模板消息“中添加
      </div>

      <el-form
        ref="rechargeRef"
        :model="rechargeForm"
        :rules="rechargeRules"
        label-width="150px"
      >
        <el-form-item class="t" label="充值成功通知" prop="templateId">
          <template #label>
            <div class="form_label">充值成功通知</div>
            <div class="label_tip">(余额充值成功通知)</div>
          </template>
          <el-input
            class="input-style"
            v-model="rechargeForm.templateId"
            placeholder="模版ID从公众平台获取"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateUrl">
          <el-input
            class="input-style"
            v-model="rechargeForm.templateUrl"
            placeholder="跳转链接,非必填"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateContent">
          <customTemplateTag
            ref="rechargeTag"
            :templateTags="rechargeTemplateTags"
            title="关键词:"
          />
        </el-form-item>
      </el-form>

      <el-form
        ref="successRef"
        :model="successForm"
        :rules="successRules"
        label-width="150px"
      >
        <el-form-item label="加油成功通知" prop="templateId">
          <template #label>
            <div class="form_label">加油成功通知</div>
            <div class="label_tip">(加油站消费成功通知)</div>
          </template>
          <el-input
            class="input-style"
            v-model="successForm.templateId"
            placeholder="模版ID从公众平台获取"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateUrl">
          <el-input
            class="input-style"
            v-model="successForm.templateUrl"
            placeholder="跳转链接,非必填"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateContent">
          <customTemplateTag
            ref="successTag"
            :templateTags="successTemplateTags"
            title="关键词:"
          />
        </el-form-item>
      </el-form>

      <el-form
        ref="priceRef"
        :model="priceForm"
        :rules="priceRules"
        label-width="150px"
      >
        <el-form-item label="商品调价通知" prop="templateId">
          <template #label>
            <div class="form_label">商品调价通知</div>
            <div class="label_tip">(加油卡圈存圈提提醒)</div>
          </template>
          <el-input
            class="input-style"
            v-model="priceForm.templateId"
            placeholder="模版ID从公众平台获取"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateUrl">
          <el-input
            class="input-style"
            v-model="priceForm.templateUrl"
            placeholder="跳转链接,非必填"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateContent">
          <customTemplateTag
            ref="priceTag"
            :templateTags="priceTemplateTags"
            title="关键词:"
          />
        </el-form-item>
      </el-form>

      <el-form
        ref="couponRef"
        :model="couponForm"
        :rules="couponRules"
        label-width="150px"
      >
        <el-form-item label="优惠券发放通知" prop="templateId">
          <template #label>
            <div class="form_label">优惠券发放通知</div>
            <div class="label_tip">(订单完成通知)</div>
          </template>
          <el-input
            class="input-style"
            v-model="couponForm.templateId"
            placeholder="模版ID从公众平台获取"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateUrl">
          <el-input
            class="input-style"
            v-model="couponForm.templateUrl"
            placeholder="跳转链接,非必填"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateContent">
          <customTemplateTag
            ref="couponTag"
            :templateTags="couponTemplateTags"
            title="关键词:"
          />
        </el-form-item>
      </el-form>

      <el-form
        ref="couponActivityRef"
        :model="couponActivityForm"
        :rules="couponnActivityRules"
        label-width="150px"
      >
        <el-form-item label="优惠活动通知" prop="templateId">
          <template #label>
            <div class="form_label">优惠活动通知</div>
            <div class="label_tip">(订单完成通知)</div>
          </template>
          <el-input
            class="input-style"
            v-model="couponActivityForm.templateId"
            placeholder="模版ID从公众平台获取"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateUrl">
          <el-input
            class="input-style"
            v-model="couponActivityForm.templateUrl"
            placeholder="跳转链接,非必填"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateContent">
          <customTemplateTag
            ref="couponActivityTag"
            :templateTags="couponActivityTemplateTags"
            title="关键词:"
          />
        </el-form-item>
      </el-form>

      <el-form
        ref="refundNoticeRef"
        :model="refundNoticeForm"
        :rules="refundNoticeRules"
        label-width="150px"
      >
        <el-form-item label="退款通知" prop="templateId">
          <template #label>
            <div class="form_label">退款通知</div>
            <div class="label_tip">(退款成功通知)</div>
          </template>
          <el-input
            class="input-style"
            v-model="refundNoticeForm.templateId"
            placeholder="模版ID从公众平台获取"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateUrl">
          <el-input
            class="input-style"
            v-model="refundNoticeForm.templateUrl"
            placeholder="跳转链接,非必填"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateContent">
          <customTemplateTag
            ref="refundNoticeTag"
            :templateTags="couponActivityRefundNotice"
            title="关键词:"
          />
        </el-form-item>
      </el-form>

      <el-form
        ref="changeIntegralRef"
        :model="changeIntegralForm"
        :rules="changeIntegralRules"
        label-width="150px"
      >
        <el-form-item label="积分变动通知" prop="templateId">
          <template #label>
            <div class="form_label">积分变动通知</div>
            <div class="label_tip">(交易成功通知)</div>
          </template>
          <el-input
            class="input-style"
            v-model="changeIntegralForm.templateId"
            placeholder="模版ID从公众平台获取"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateUrl">
          <el-input
            class="input-style"
            v-model="changeIntegralForm.templateUrl"
            placeholder="跳转链接,非必填"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateContent">
          <customTemplateTag
            ref="changeIntegralTag"
            :templateTags="couponActivityChangeIntegral"
            title="关键词:"
          />
        </el-form-item>
      </el-form>

      <el-form
        ref="customRef"
        :model="customForm"
        :rules="customRules"
        label-width="150px"
      >
        <el-form-item label="自定义通知" prop="templateId">
          <template #label>
            <div class="form_label">自定义通知</div>
            <div class="label_tip">(订单创建成功通知)</div>
          </template>
          <el-input
            class="input-style"
            v-model="customForm.templateId"
            placeholder="模版ID从公众平台获取"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateUrl">
          <el-input
            class="input-style"
            v-model="customForm.templateUrl"
            placeholder="跳转链接,非必填"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateContent">
          <customTemplateTag
            ref="customTag"
            :templateTags="customTemplateTags"
            title="关键词:"
          />
        </el-form-item>
      </el-form>

      <el-form
        ref="monthStatementRef"
        :model="monthStatementForm"
        :rules="monthStatementRules"
        label-width="150px"
      >
        <el-form-item label="月账单通知" prop="templateId">
          <template #label>
            <div class="form_label">月账单通知</div>
            <div class="label_tip">(月账单提醒)</div>
          </template>
          <el-input
            class="input-style"
            v-model="monthStatementForm.templateId"
            placeholder="模版ID从公众平台获取"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateUrl">
          <el-input
            class="input-style"
            v-model="monthStatementForm.templateUrl"
            placeholder="跳转链接,非必填"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateContent">
          <customTemplateTag
            ref="monthStatementTag"
            :templateTags="monthStatementTemplateTags"
            title="关键词:"
          />
        </el-form-item>
      </el-form>

      <el-form
        ref="couponExpireRef"
        :model="couponExpireForm"
        :rules="couponExpireRules"
        label-width="150px"
      >
        <el-form-item label="优惠券到期提醒" prop="templateId">
          <template #label>
            <div class="form_label">优惠券到期提醒</div>
            <div class="label_tip">(订单完成通知)</div>
          </template>
          <el-input
            class="input-style"
            v-model="couponExpireForm.templateId"
            placeholder="模版ID从公众平台获取"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateUrl">
          <el-input
            class="input-style"
            v-model="couponExpireForm.templateUrl"
            placeholder="跳转链接,非必填"
            :disabled="drawer.type === 'read'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateContent">
          <customTemplateTag
            ref="couponExpireTag"
            :templateTags="couponExpireTemplateTags"
            title="关键词:"
          />
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: right; padding: 0 20px; margin-bottom: 20px">
      <el-button @click="handleClose">取消</el-button>
      <el-button
        v-if="drawer.type === 'edit'"
        type="primary"
        @click="handleSubmit('edit')"
        >提交</el-button
      >
      <el-button
        v-if="drawer.type === 'new'"
        type="primary"
        @click="handleSubmit('add')"
        >提交</el-button
      >
    </div>
  </el-drawer>
</template>
<script>
import customTemplateTag from "@/components/customTemplateTag";
import {
  wxMessageTemplateAdd,
  wxMessageTemplateEdit,
  templateCheckId,
} from "@/api/message/template-msg";

export default {
  components: { customTemplateTag },
  props: {
    parm: {
      type: Object,
      default: null,
    },
  },
  data() {
    const validateTemplateId = async (rule, value, callback, templateType) => {
      console.log("触发了validateTemplateId校验");
      if (!value) {
        callback(); // 如果没有输入值，则直接通过校验
        return;
      }
      const data = {
        enterpriseId: this.presentEnterprise.enterpriseId,
        pushChannel: 1,
        wxTemplateContentList: [{ templateId: value || "", templateType }],
      };
      const res = await templateCheckId(data);
      if (res.data) {
        callback();
      } else {
        return callback(new Error("模板ID错误"));
      }
    };

    let validateRecharge = (rule, value, callback) => {
      if (!this.rechargeForm.templateId) {
        callback();
      }
      let rechargeTag = this.$refs.rechargeTag.getTags();
      if (rechargeTag.length === 0) {
        callback(new Error("请选择关键词"));
        return;
      }
      callback();
    };
    let validateSuccess = (rule, value, callback) => {
      if (!this.successForm.templateId) {
        callback();
      }
      let successTag = this.$refs.successTag.getTags();
      if (successTag.length === 0) {
        callback(new Error("请选择关键词"));
        return;
      }
      callback();
    };
    let validatePrice = (rule, value, callback) => {
      if (!this.priceForm.templateId) {
        callback();
      }
      let priceTag = this.$refs.priceTag.getTags();
      if (priceTag.length === 0) {
        callback(new Error("请选择关键词"));
        return;
      }
      callback();
    };
    let validateCoupon = (rule, value, callback) => {
      if (!this.couponForm.templateId) {
        callback();
      }
      let couponTag = this.$refs.couponTag.getTags();
      if (couponTag.length === 0) {
        callback(new Error("请选择关键词"));
        return;
      }
      callback();
    };
    let validateCouponActivity = (rule, value, callback) => {
      if (!this.couponActivityForm.templateId) {
        callback();
      }
      let couponActivityTag = this.$refs.couponActivityTag.getTags();
      if (couponActivityTag.length === 0) {
        callback(new Error("请选择关键词"));
        return;
      }
      callback();
    };
    let validateRefundNotice = (rule, value, callback) => {
      if (!this.refundNoticeForm.templateId) {
        callback();
      }
      let refundNoticeTag = this.$refs.refundNoticeTag.getTags();
      if (refundNoticeTag.length === 0) {
        callback(new Error("请选择关键词"));
        return;
      }
      callback();
    };
    let validateChangeIntegral = (rule, value, callback) => {
      if (!this.changeIntegralForm.templateId) {
        callback();
      }
      let changeIntegralTag = this.$refs.changeIntegralTag.getTags();
      if (changeIntegralTag.length === 0) {
        callback(new Error("请选择关键词"));
        return;
      }
      callback();
    };
    let validateCustom = (rule, value, callback) => {
      if (!this.customForm.templateId) {
        callback();
      }
      let customTag = this.$refs.customTag.getTags();
      if (customTag.length === 0) {
        callback(new Error("请选择关键词"));
        return;
      }
      callback();
    };
    let validateMonthStatement = (rule, value, callback) => {
      if (!this.monthStatementForm.templateId) {
        callback();
      }
      let monthStatementTag = this.$refs.monthStatementTag.getTags();
      if (monthStatementTag.length === 0) {
        callback(new Error("请选择关键词"));
        return;
      }
      callback();
    };
    let validateCouponExpire = (rule, value, callback) => {
      if (!this.couponExpireForm.templateId) {
        callback();
      }
      let couponExpireTag = this.$refs.couponExpireTag.getTags();
      if (couponExpireTag.length === 0) {
        callback(new Error("请选择关键词"));
        return;
      }
      callback();
    };
    return {
      drawer: {
        show: this.parm ? this.parm.drawerShow : false,
        type: this.parm ? this.parm.drawerType : "read", // edit || read || new
      },
      enterpriseList: this.parm ? this.parm.enterpriseList : [],
      channelList: this.parm ? this.parm.channelList : [],
      msgData: this.parm ? this.parm.msgData : {},
      rechargeTemplateTags: [
        "充值卡号",
        "充值金额",
        "赠送金额",
        "余额",
        "充值时间",
      ],
      successTemplateTags: [
        "油站名称",
        "油品名称",
        "付款明细",
        "钱包余额",
        "消费时间",
      ],
      priceTemplateTags: ["操作类型", "操作金额", "时间"],
      couponTemplateTags: ["油站名称", "优惠券名称"],
      couponActivityTemplateTags: ["活动内容"],
      couponActivityRefundNotice: [
        "油站名称",
        "退款类型",
        "退款金额",
        "退款时间",
      ],
      couponActivityChangeIntegral: [
        "油站名称",
        "变动时间",
        "积分变动",
        "积分余额",
      ],
      customTemplateTags: ["油站名称", "通知标题", "通知内容"],
      monthStatementTemplateTags: ["商户名称", "账单周期", "上月消费"],
      couponExpireTemplateTags: ["油站名称", "到期提醒"],
      queryData: {
        enterpriseId: this.parm ? this.parm.enterpriseId : "",
        pushChannel: this.parm ? this.parm.pushChannel : "",
      },
      priceForm: {
        templateType: 4,
      },
      rechargeForm: {
        templateType: 3,
      },
      successForm: {
        templateType: 1,
      },
      couponForm: {
        templateType: 5,
      },
      couponActivityForm: {
        templateType: 6,
      },
      refundNoticeForm: {
        templateType: 7,
      },
      changeIntegralForm: {
        templateType: 8,
      },
      customForm: {
        templateType: 9,
      },
      monthStatementForm : {
        templateType: 10,
      },
      couponExpireForm: {
        templateType: 11,
      },
      rechargeRules: {
        templateId: [
          {
            validator: (rule, value, callback) =>
              validateTemplateId(rule, value, callback, 3),
            trigger: "blur",
          },
        ],
        templateContent: [{ validator: validateRecharge, trigger: "change" }],
      },
      successRules: {
        templateId: [
          {
            validator: (rule, value, callback) =>
              validateTemplateId(rule, value, callback, 1),
            trigger: "blur",
          },
        ],
        templateContent: [{ validator: validateSuccess, trigger: "change" }],
      },
      priceRules: {
        templateId: [
          {
            validator: (rule, value, callback) =>
              validateTemplateId(rule, value, callback, 4),
            trigger: "blur",
          },
        ],
        templateContent: [{ validator: validatePrice, trigger: "change" }],
      },
      couponRules: {
        templateId: [
          {
            validator: (rule, value, callback) =>
              validateTemplateId(rule, value, callback, 5),
            trigger: "blur",
          },
        ],
        templateContent: [{ validator: validateCoupon, trigger: "change" }],
      },
      couponnActivityRules: {
        templateId: [
          {
            validator: (rule, value, callback) =>
              validateTemplateId(rule, value, callback, 6),
            trigger: "blur",
          },
        ],
        templateContent: [
          { validator: validateCouponActivity, trigger: "change" },
        ],
      },
      queryDataRules: {
        enterpriseId: [
          { required: true, message: "请选择油企", trigger: "change" },
        ],
        pushChannel: [
          { required: true, message: "请选择推送渠道", trigger: "change" },
        ],
      },
      refundNoticeRules: {
        templateId: [
          {
            validator: (rule, value, callback) =>
              validateTemplateId(rule, value, callback, 7),
            trigger: "blur",
          },
        ],
        templateContent: [
          { validator: validateRefundNotice, trigger: "change" },
        ],
      },
      changeIntegralRules: {
        templateId: [
          {
            validator: (rule, value, callback) =>
              validateTemplateId(rule, value, callback, 8),
            trigger: "blur",
          },
        ],
        templateContent: [
          { validator: validateChangeIntegral, trigger: "change" },
        ],
      },
      customRules: {
        templateId: [
          {
            validator: (rule, value, callback) =>
              validateTemplateId(rule, value, callback, 9),
            trigger: "blur",
          },
        ],
        templateContent: [{ validator: validateCustom, trigger: "change" }],
      },
      monthStatementRules: {
        templateId: [ {
            validator: (rule, value, callback) =>
              validateTemplateId(rule, value, callback, 10),
            trigger: "blur",
          },],
        templateContent: [{ validator: validateMonthStatement, trigger: "change" }],
      },
      couponExpireRules: {
        templateId: [ {
            validator: (rule, value, callback) =>
              validateTemplateId(rule, value, callback, 11),
            trigger: "blur",
          },],
        templateContent: [{ validator: validateCouponExpire, trigger: "change" }],
      }
    };
  },
  methods: {
    async handleSubmit(key) {
      // const form1 = new Promise((resolve, reject) => {
      //     this.$refs['queryData'].validate(valid => {
      //         if (valid) resolve()
      //     })
      // })
      const formPromises = [];

      const formRefs = [
        "rechargeRef", "successRef", "priceRef", "couponRef",
        "couponActivityRef", "refundNoticeRef", "changeIntegralRef",
        "customRef", "monthStatementRef", "couponExpireRef"
      ];
      // 遍历生成每个表单的校验
      formRefs.forEach(ref => {
        const formPromise = new Promise((resolve, reject) => {
          this.$refs[ref].validateField("templateContent",(valid) => {
            if (valid != "请选择关键词") resolve(true);
          });
        });

        formPromises.push(formPromise);
      });
      // 利用 promise.all 成功请求多个异步
      Promise.all(formPromises).then(() => {
        let forms = [
          'rechargeForm', 'successForm', 'priceForm', 'couponForm',
          'couponActivityForm', 'refundNoticeForm', 'changeIntegralForm',
          'customForm', 'monthStatementForm', "couponExpireForm"
        ];

        forms.forEach(form => {
          let tag = this.$refs[form.replace('Form', 'Tag')].getTags();
          this[form].templateContent = tag.join(",");
        });
        let wxMessageTemplateForm = {
          enterpriseId: this.presentEnterprise.enterpriseId,
          pushChannel: 1,
          wxTemplateContentList: [],
        };
        wxMessageTemplateForm.wxTemplateContentList.push(
          this.rechargeForm,
          this.successForm,
          this.priceForm,
          this.couponForm,
          this.couponActivityForm,
          this.refundNoticeForm,
          this.changeIntegralForm,
          this.customForm,
          this.monthStatementForm,
          this.couponExpireForm
        );


        if (key === "add") {
          wxMessageTemplateAdd(wxMessageTemplateForm).then((res) => {
            if (res && res.code === 200) {
              this.$message.success(res.msg);
              this.$emit("success-data");
              this.handleClose()
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          wxMessageTemplateEdit(wxMessageTemplateForm).then((res) => {
            if (res && res.code === 200) {
              this.$message.success(res.msg);
              this.$emit("success-data");
              this.handleClose()
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    handleClose() {


      const formRefs = [
        "rechargeRef",
        "successRef",
        "priceRef",
        "couponRef",
        "couponActivityRef",
        "refundNoticeRef",
        "changeIntegralRef",
        "customRef",
      ];
      formRefs.forEach((ref) => {
           this.$refs[ref].resetFields();

        });
        this.drawer.show = false;
    },
    format(data) {
      // Map 或对象来存储模板类型和相应的表单，然后在循环中根据模板类型直接设置对应的表单数据和标签
      const formMap = new Map();
      formMap.set(3, { form: "rechargeForm", tag: "rechargeTag" });
      formMap.set(1, { form: "successForm", tag: "successTag" });
      formMap.set(4, { form: "priceForm", tag: "priceTag" });
      formMap.set(5, { form: "couponForm", tag: "couponTag" });
      formMap.set(6, { form: "couponActivityForm", tag: "couponActivityTag" });
      formMap.set(7, { form: "refundNoticeForm", tag: "refundNoticeTag" });
      formMap.set(8, { form: "changeIntegralForm", tag: "changeIntegralTag" });
      formMap.set(9, { form: "customForm", tag: "customTag" });
      formMap.set(10, { form: "monthStatementForm", tag: "monthStatementTag" });
      formMap.set(11, { form: "couponExpireForm", tag: "couponExpireTag" });

      if (data) {
        this.queryData.enterpriseId = data.enterpriseId;
        this.queryData.pushChannel = data.pushChannel;

        data.wxTemplateContentList.forEach((item) => {
          const formInfo = formMap.get(item.templateType);
          if (formInfo) {
            this[formInfo.form] = item;
            this.$nextTick(() => {
              this.$refs[formInfo.tag].setTags(item.templateContent.split(","));
            });
          }
        });
      } else {
        // 遍历 map对象的键值对 ，赋值，设置模板值
        for (const [templateType, formInfo] of formMap.entries()) {
          this[formInfo.form] = { templateType };
          this.$nextTick(() => {
            this.$refs[formInfo.tag].setTags([]);
          });
        }
      }
  }
  },
  watch: {
    parm(newValue) {
      this.drawer.show = newValue.drawerShow;
      this.drawer.type = newValue.drawerType;
      this.enterpriseList = newValue.enterpriseList;
      this.channelList = newValue.channelList;
      this.msgData = newValue.msgData;
      this.format(this.msgData);
    },
  },
  computed: {
    authUser() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  color: #05a6f0;
  text-align: center;
  border: 1px solid #ccc;
  padding: 14px 0;
  border-radius: 10px;
  margin-bottom: 12px;
}

a {
  list-style: none;
  color: #0000ff !important;
}

.form-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form {
  width: 60%;
}

.input-style {
  width: 90%;
  margin-bottom: 12px;
}

::v-deep .el-form-item__label::before {
  content: "*";
  color: red;
  margin-right: 5px;
}

::v-deep .add-drawer {
  overflow-y: auto;
}

::v-deep .el-drawer__header {
  margin-bottom: 0 !important;
}
::v-deep .el-form-item__label::before {
 content: "";
}
.label_tip {
 margin-top: -1rem;
 font-weight: 400;
 color: #aaa;
 text-align: start;
}
.form_label {
 text-align: start;
  margin-top: -2.8rem;
  // font-size: 1rem;
}
</style>
